不知不覺來到第16天，
今天我們要來討論AJAX，
暫時先跳來這邊，
來講講我經過這一個月專案，
吸收到所謂的AJAX~

但在這之前，不免俗說一下，
如果你曾看過我的文章，應該可以感受到我是個熱情的人（有嗎？
我學程式的宗旨是『讓自己快樂的學程式，每天一小點一小步，我還是能抵達終點的！
那種不正經，快快樂樂的模式，是讓自己沈浸在學習熱忱裡的輔助！獻給正準備或者已經是麻瓜反覆挫折的你』

其實說真的！當初聽到這個，還想說？ yo!好像饒舌念法聽起來很厲害 （又離題了

AJAX即「Asynchronous JavaScript and XML」（非同步的JavaScript與XML技術），
簡單來說，網頁不需要重新整理，就可以即時透過瀏覽去跟伺服器做溝通，並且去資料庫撈出資料！
伺服器對 AJAX 資料請求回應常以三種資料格式（HTML、XML、JSON）其中一個做回覆，

舉個例子：
Javascript 做搭配就是 JSON！（不是那個傑生XDDDD

AJAX非同步請求

瀏覽器跟伺服器互相傳遞資料，接著畫面要更新時，會透過DOM來完成畫面呈現。
通過 XMLHttpRequest 生成的請求可以有兩種方式來獲取資料，非同步模式或同步模式。

非同步：可以同時進行多個任務，不需要等待上一個動作完成後才做，
當下就能讓程式碼繼續往下跑，等到請求資料完成才會執行 callback 函式（回呼函式）。
回呼函示是什麼？詳情請見

https://developer.mozilla.org/zh-TW/docs/Glossary/Callback_function

白話一點說法！！
在執行請求的同時，瀏覽器可以正常執行其他事務的處理，不會被干擾，影響效能問題。

同步：必須等到請求全完成才會繼續往下執行程式碼。

JavaScript的Ajax

透過標準物件 XMLHttpRequest() 來完成初始化，
主要提供 GET 跟 POST 方法來取得或送出資料！

奉上，這是我近期在專案負責一項小功能，按讚，在寫之前有先試著做！

document.addEventListener("turbolinks:load", () => {
	const likeIcon = document.querySelector("#like")
	if (likeIcon) {
    likeIcon.addEventListener("click", () => {
      var id = likeIcon.dataset.id
      Rails.ajax({
        url: `/products/${id}/favorite`,
        type: "post",
        data: "",
        success: (data) => {  
          if(data.status === "added") {
            likeIcon.classList.remove("text-gray-800");
            likeIcon.classList.add("text-red-400");
          } else {
            likeIcon.classList.remove("text-red-400")
            likeIcon.classList.add("text-gray-800");
          }
        },
        error: function (err) {
          console.log(err);
        },
      });
    })
  }
})

今天分享到這邊，
往後有再看到一些更好的觀念，
會再繼續補上拉！

謝謝你的收看

參考資料：維基百科